import React, { Component } from 'react'
import { PageHeader ,  Select ,List} from 'antd'
import './SpecialtyCss.css'
import cityData from './cityData'
import axios from 'axios'
import Tubiao from './updateSpecialty'

const { Option } = Select

export default class AddSpecialty extends Component {
    state={
        categoryList:[],
        tempList:[],
        isShow:false
    }
    render() {
        return (
            <div>
                 <PageHeader
                    className="site-page-header"
                    onBack={() => null} //跳转到列表
                    title="特产分类"
                    subTitle="可以查看各个地区的特产"
                />
                <Select
                    showSearch
                    style={{ width: 200 ,margin: 20}}
                    placeholder="Select a person"
                    optionFilterProp="children"
                    onChange={this.onChange}
                    filterOption={(input, option) =>
                    option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                    }
                >
                    {
                    cityData.map((item,index)=>{
                        return (
                            <Option value={item} key = {index}>{item}</Option>
                        )
                    })
                    }
                </Select>
                <List
                size="small"
                header={<div>Header</div>}
                footer={<div>Footer</div>}
                bordered
                dataSource={this.state.isShow?this.state.tempList:this.state.categoryList}
                renderItem={item => <List.Item>{item.name}</List.Item>}
                />
               <div style={{height:"500px",width:"100%",marginTop:"30px"}}>
                <Tubiao category ={this.state.categoryList}></Tubiao>
               </div>
              
            </div>
        )
    }
    //搜索
    onChange=(value)=>{
        // console.log(`selected ${value}`)
        this.setState({
            tempList: this.state.categoryList.filter(item=> item.city=== value),
            isShow:true
        })
    }
    //获取原始数据
    componentDidMount() {
        axios.get("http://localhost:5000/dishes").then(res=>{
            // console.log(res.data)
            this.setState({
                categoryList:res.data
            })
        })
    }
    
}
